<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 69 71"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#1A446C" d="M27.13 57.859a7.157 7.157 0 1 1-14.06-2.685 7.157 7.157 0 0 1 14.06 2.685Z"/><path fill="#06F" d="M27.967 14.135c-2.354-.45-4.51-.133-6.125.6-1.556.709-2.45 1.708-2.833 2.644a5.188 5.188 0 0 1-9.604-3.925c1.554-3.806 4.624-6.567 8.15-8.17 3.67-1.668 8.014-2.172 12.359-1.342C38.9 5.658 47.07 13.447 45.228 23.099c-1.067 5.589-5.251 9.475-10.057 11.29a5.19 5.19 0 1 1-3.66-9.712c2.237-.845 3.284-2.266 3.524-3.524.386-2.018-1.468-5.949-7.068-7.018Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#06F" d="M25.374 27.72a5.188 5.188 0 0 1 4.123 6.069l-1.008 5.28a5.189 5.189 0 0 1-10.193-1.947l1.008-5.28a5.19 5.19 0 0 1 6.07-4.123Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#06F" d="M38.223 27.756a5.189 5.189 0 0 1-3.093 6.66l-8.946 3.271a5.189 5.189 0 0 1-3.567-9.745l8.95-3.274a5.189 5.189 0 0 1 6.656 3.088Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#1A446C" d="m58.686 28.078-4.108-.872 3.965-5.734 2.7.574-2.557 6.032Zm5.33 1.132-4.085-.867 3.965-5.734 2.676.568-2.556 6.033Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class GroupDm21397p extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
